<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
       xmlns:h="http://java.sun.com/jsf/html"
       xmlns:f="http://java.sun.com/jsf/core"
       xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:body>
        <ui:composition template="template/basicTemplate.xhtml">
            <ui:param name="titulo" value="Formulario de Registro" />
            <ui:define name="body">
                <script type="text/javascript">
                    function abrirAdjuntos(){
                        window.open("#{facesContext.externalContext.requestContextPath}/jsp/addAcompanante.jsp", "adjuntos", "width=1000,height=400")
                        return false;
                    }
                </script>
                <h:form rendered="#{formularioDeRegistroBean.hayUnFormularioActivo()}" id="registrarUsuarioForm" class="form-horizontal">
                    <h:panelGroup layout="block">
                        <h:outputText value="#{formularioDeRegistroBean.formularioVO.contenidoExtra}" escape="false" />
                    </h:panelGroup>
                    <h3>FORMULARIO DE INSCRIPCIÓN EN ACTIVIDADES INSTITUCIONALES, CULTURALES Y DEPORTIVAS</h3>
                    <h:panelGroup layout="block">
                        <div class="alert">
                            <b>Atención!</b> para el registro en el formulario se debe diligenciar la información solicitada por la División de Bienestar Universitario.
                            <h:messages showSummary="true" showDetail="false" />
                        </div>
                    </h:panelGroup>
                    <div class="control-group">
                        <label class="control-label" for="actividad">Actividad</label>
                        <div class="controls">
                            <label class="radio">
                                <input type="radio" name="actividad" id="actividad" value="#{formularioDeRegistroBean.formularioVO.actividad.id}" checked="checked"/>
                                #{formularioDeRegistroBean.formularioVO.actividad.nombre}
                            </label>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="apellidos">Apellidos</label>
                        <div class="controls">
                            <h:inputText id="apellidos" value="#{formularioDeRegistroBean.usuarioRegistradoVO.apellido}" required="true" requiredMessage="Por favor escribe tus apellidos.">

                            </h:inputText>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="nombres">Nombres</label>
                        <div class="controls">
                            <h:inputText id="nombres" value="#{formularioDeRegistroBean.usuarioRegistradoVO.nombre}" required="true" requiredMessage="Por favor escribe tus nombres.">
                                
                            </h:inputText>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="documento">Documento de Identificación</label>
                        <div class="controls">
                            <h:selectOneMenu id="tipoDocumento" value="#{formularioDeRegistroBean.usuarioRegistradoVO.tipoDeDocumento}" class="input-small" required="true" requiredMessage="Por favor selecciona un tipo de documento." >
                                <f:selectItems value="#{formularioDeRegistroBean.listaDeTiposDeDocumentos()}"/>
                            </h:selectOneMenu>
                            <h:outputText value=" "/>
                            <h:inputText id="documento" value="#{formularioDeRegistroBean.usuarioRegistradoVO.documento}" requiredMessage="Por digite su documento" converterMessage="La cedula debe ser un número y no debe contener comas, ni puntos.">
                                <f:validateRequired/>
                                <f:convertNumber/>
                            </h:inputText>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="genero">Genero</label>
                        <div class="controls">
                            <h:selectOneRadio  id="genero" value="#{formularioDeRegistroBean.usuarioRegistradoVO.genero}" layout="pageDirection">
                                <f:selectItems value="#{formularioDeRegistroBean.listaDeGeneros()}" />
                            </h:selectOneRadio>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="tipoVinculacion">Tipo de contratación</label>
                        <div class="controls">
                            <h:selectOneMenu id="tipoDeVinculacion" value="#{formularioDeRegistroBean.usuarioRegistradoVO.tipoDeContratacion}" converter="#{tipoDeContratacionVOConverter}">
                                <f:selectItems value="#{formularioDeRegistroBean.listaDeTiposDeContratacion()}" />
                            </h:selectOneMenu>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="vinculadoA">Dependencia o Programa Acádemico</label>
                        <div class="controls">
                            <h:selectOneMenu id="vinculadoA" value="#{formularioDeRegistroBean.usuarioRegistradoVO.dependencia}">
                                <f:selectItems value="#{formularioDeRegistroBean.listaDeDependencias()}" />
                            </h:selectOneMenu>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="correo">Correo Electrónico</label>
                        <div class="controls">
                            <div class="input-append">
                                <h:inputText id="correo" value="#{formularioDeRegistroBean.usuarioRegistradoVO.correo}" requiredMessage="Por favor escriba su correo electrónico institucional" validatorMessage="Ese no es un correo electrónico válido">
                                    <f:validateRegex pattern="^([a-zA-Z0-9_\-\.]+)"/>
                                    <f:validateRequired />
                                </h:inputText><span class="add-on">@pedagogica.edu.co</span>
                            </div>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="telefono">Teléfono de contacto</label>
                        <div class="controls">
                            <h:inputText id="telefono" validatorMessage="La extensión debe ser un número" value="#{formularioDeRegistroBean.usuarioRegistradoVO.telefono}">
                                <f:convertNumber integerOnly="true" maxIntegerDigits="5" />
                            </h:inputText>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="celular">Teléfono Celular</label>
                        <div class="controls">
                            <h:inputText id="celular" value="#{formularioDeRegistroBean.usuarioRegistradoVO.celular}" requiredMessage="Escribe tu celular" validatorMessage="El número celular es un número no debe contener otros caracteres">
                                <f:validateRequired />
                                <f:convertNumber />
                            </h:inputText>
                        </div>
                    </div>
                    <div class="control-group">
                        <label class="control-label" for="puntoDeEncuentro">Punto de Encuentro</label>
                        <div class="controls">
                            <h:selectOneMenu id="puntoDeEncuentro" value="#{formularioDeRegistroBean.usuarioRegistradoVO.puntoDeEncuentro}" converter="#{puntoDeEncuetroVOConverter}" >
                                <f:selectItems value="#{formularioDeRegistroBean.formularioVO.puntosDeEncuentro}" var="puntoDeE" itemLabel="#{puntoDeE.toString()}" itemValue="#{puntoDeE}" />
                            </h:selectOneMenu>
                        </div>
                    </div>
                    <h:panelGroup layout="block" rendered="#{formularioDeRegistroBean.formularioVO.tieneAcompanante}">
                        <div class="alert">
                            <button type="button" class="close" data-dismiss="alert">x</button>
                            Para la inscripción de los hijos o padres se debe adjuntar 
                            copia del registro civil para confirmar parentesco,  de lo contrario 
                            no se tendrá en cuenta en la inscripción. Recuerda que para este evento
                            se puede llevar máximo #{formularioDeRegistroBean.formularioVO.cantidadDeAcompanante} acompanante(s)
                        </div>
                        
                        <h:commandButton value="Recargar..." id="recargar" style="display: none;">
                            <f:ajax render="acompanantes" />
                        </h:commandButton>
                        <h:button value="Agregar" onclick="return abrirAdjuntos()" styleClass="btn"/>
                        
                        <h:dataTable id="acompanantes" value="#{formularioDeRegistroBean.usuarioRegistradoVO.acompanantes}" var="acompanante" styleClass="table table-striped">
                            <h:column>
                                <f:facet name="header">Nombre</f:facet>
                                #{acompanante.nombreCompleto}
                            </h:column>
                            <h:column>
                                <f:facet name="header">Documento</f:facet>
                                #{acompanante.tipoDocumento} - #{acompanante.documento}
                            </h:column>
                            <h:column>
                                <f:facet name="header">Parentesco</f:facet>
                                #{acompanante.parentesco}
                            </h:column>
                            <h:column>
                                <f:facet name="header">Edad</f:facet>
                                #{acompanante.edad}
                            </h:column>
                            <h:column>
                                <f:facet name="header">Soporte</f:facet>
                                <h:outputLink value="#{facesContext.externalContext.requestContextPath}/servlet/upload/abrir"  >
                                    <h:outputText value="#{acompanante.adjuntoVO.nombreArchivo}" />
                                    <f:param name="id" value="#{acompanante.id}" />
                                </h:outputLink>
                            </h:column>
                        </h:dataTable>
                    </h:panelGroup>
                    <div class="form-actions">
                        <h:commandButton id="submit" class="btn btn-primary" value="Guardar Información" action="#{formularioDeRegistroBean.registrarUsuario()}" />
                        <input type="reset" class="btn" value="Reiniciar Formulario" />
                    </div>
                </h:form>
                <h:panelGroup layout="block" class="alert alert-error" rendered="#{!formularioDeRegistroBean.hayUnFormularioActivo()}">
                    Oops! En este momento no hay habilitado ningún formulario de registro. Vuelve pronto. Gracias
                </h:panelGroup>
            </ui:define>
        </ui:composition>
        
    </h:body>
</html>